<template>
    <VideoBackground></VideoBackground>
    <!-- <div class=" box"> -->
        <div class="app login-form">
            <h2>Login</h2>
            <form @submit.prevent="handleLogin">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" id="username" v-model="username" required>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="password" v-model="password" required>
                </div>
                <button type="submit">Login</button>
            </form>
        </div>
    <!-- </div> -->
</template>

<script setup>
import { ref } from 'vue';
import VideoBackground from './VideoBackground.vue';

const username = ref('');
const password = ref('');

const handleLogin = () => {
    // 这里可以添加登录逻辑
    console.log('Login with:', username.value, password.value);
};
</script>

<style scoped>
@import url(../css/global.css);
.box{
    height: 500px;
}
.login-page {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-app {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.login-form {
    position: relative;
    z-index: 2;
    /* background: white; */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    height: 350px;
}

.login-form h2 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 24px;
    color: var(--theme-color);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--inactive-color);
}

.form-group input {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 500;
    background-color: var(--search-bg);
    box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02);
    color: var(--theme-color);
}

.form-group input::-moz-placeholder,
.form-group input:-ms-input-placeholder,
.form-group input::placeholder {
    font-family: var(--body-font);
    color: var(--inactive-color);
    font-size: 15px;
    font-weight: 500;
}

.login-form button {
    width: 100%;
    height: 40px;
    background-color: var(--theme-color-dark);
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-form button:hover {
    color: black;
    background-color: var(--theme-color);
}
</style>
